import 'package:flutter/material.dart';
import '../model/post.dart';

class ViewDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return GridViewBuilderDemo();
  }
}

class GridViewBuilderDemo extends StatelessWidget{
  Widget _gridItemBuilder(BuildContext context, int index){
    return Container(
      child: Image.network(
        posts[index].imageUrl ?? '',
        fit: BoxFit.cover,
      ),
    );
  }


  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: EdgeInsets.all(8.0),
      itemCount: posts.length,
      itemBuilder: _gridItemBuilder,
      // gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      //   crossAxisCount: 3,
      //   crossAxisSpacing: 8.0,
      //   mainAxisSpacing: 8.0
      // ),
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 150,
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0
      ),
    );
  }
}


class GridViewExtentDemo extends StatelessWidget{
  List<Widget> _buildTiles(int length){
    return List.generate(length, (int index) {
        return Container(
          color: Colors.grey[300],
          alignment: Alignment(0.0,0.0),
          child: Text('Item $index', style: TextStyle(fontSize: 18.0, color: Colors.grey)),
        );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 150, // 元素在横轴上的最大长度
      crossAxisSpacing: 16.0, // 交叉的轴上的子widget之间的间距
      mainAxisSpacing: 16.0, // 主轴上的子widget之间的间距
      // scrollDirection: Axis.horizontal, // 滚动方向
      children: _buildTiles(100),
    ); 
    
  }
}


class GridViewCountDemo extends StatelessWidget{
  List<Widget> _buildTiles(int length){
    return List.generate(length, (int index) {
        return Container(
          color: Colors.grey[300],
          alignment: Alignment(0.0,0.0),
          child: Text('Item $index', style: TextStyle(fontSize: 18.0, color: Colors.grey)),
        );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      crossAxisSpacing: 16.0,
      mainAxisSpacing: 16.0,
      // scrollDirection: Axis.horizontal, // 滚动方向
      children: _buildTiles(100),
    );
  }
}

class PageViewBuilderDemo extends StatelessWidget{
  Widget _pageItemBuilder(BuildContext context, int index){
    return Stack(
      children: [
        SizedBox.expand(
          child: Image.network(
            posts[index].imageUrl ?? '',
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          bottom: 8.0,
          left: 8.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                posts[index].title ?? '',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              Text(
                posts[index].author ?? '',
                style: TextStyle(fontWeight: FontWeight.normal),
              )
            ],
        ))
      ],
    );
  }


  @override
  Widget build(BuildContext context) {
    return PageView.builder(
        itemCount: posts.length,
        itemBuilder: _pageItemBuilder
      );
  }
}

class PageViewDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return PageView(
      // pageSnapping: false, //回弹 默认true
      // reverse: true, //倒叙 默认false
      // scrollDirection: Axis.vertical, //滚动方向 垂直
      onPageChanged: (currentPage) => debugPrint('page: $currentPage'),
      controller: PageController(
        initialPage: 1,  //默认展示position 位置
        keepPage: true, //记住用户滚动的 位置  默认true
        viewportFraction: 0.85 //页面占用比例 默认1
      ),
      children: [
        Container(
          color: Colors.brown[900],
          alignment: Alignment(0.0,0.0),
          child: Text(
            'ONE',
            style: TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        Container(
          color: Colors.yellow[900],
          alignment: Alignment(0.0,0.0),
          child: Text(
            'TWO',
            style: TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        Container(
          color: Colors.green[900],
          alignment: Alignment(0.0,0.0),
          child: Text(
            'THREE',
            style: TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        )
      ],
    );
  }
}